<template>
  <div class="handle_status">
    <span class="block_label_color small_label font_block" :class="processStatusColor">{{data.handleStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'HandleStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据处理状态返回相应class
    processStatusColor() {
      switch (this.data.handleStatusValue) {
        case 'Unprocessed':
          // 待处理
          return 'handle_status_unprocess'
        case 'Processed':
          // 已处理
          return 'handle_status_process'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 处理状态颜色 */
  // 待处理
  @clStateUnprocessed: #ffef71;
  // 已处理
  @clStateProcessed: #a0e7b1;
  .handle_status{
    .block_label_color{
      /*处理状态*/
      // 待处理
      &.handle_status_unprocess{
        background-color: @clStateUnprocessed;
      }
      // 已处理
      &.handle_status_process{
        background-color: @clStateProcessed;
      }
    }
  }
</style>
